<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <#assign base=request.contextPath/>
    <#setting  number_format="0.##"/>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="${base}/backstage/layui/css/layui.css" media="all">
    <link href="${base}/sweep/css/mui.css" rel="stylesheet"/>
    <link href="${base}/sweep/css/app.css" rel="stylesheet"/>
    <link rel="stylesheet" href="${base}/sweep/gou/css/style.css">
    <script src="${base}/backstage/layui/layui.js?t=1"></script>
    <script src="${base}/backstage/js/jquery-1.8.3.min.js?t=1"></script>
    <script src="${base}/backstage/js/loading.js?t=1"></script>
    <style>
        .mui-row.mui-fullscreen>[class*="mui-col-"] {
            height: 100%;
        }

        .mui-col-xs-3,
        .mui-col-xs-9 {
            overflow-y: auto;
            height: 100%;
        }

        .mui-segmented-control .mui-control-item {
            line-height: 50px;
            width: 100%;
        }

        .mui-control-content {
            display: block;
        }

        .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
            background-color: #fff;
        }
        .mui-plus .plus{
            display: inline;
        }

        .plus{
            display: none;
        }

        #topPopover {
            position: fixed;
            top: 16px;
            right: 6px;
        }
        #topPopover .mui-popover-arrow {
            left: auto;
            right: 6px;
        }
        p {
            text-indent: 22px;
        }
        span.mui-icon {
            font-size: 14px;
            color: #007aff;
            margin-left: -15px;
            padding-right: 10px;
        }
        .mui-popover {
            height: 300px;
        }
        .mui-content {
            padding: 10px;
        }


    </style>
</head>
<body>
 <input type="hidden" value="${tableNumberId}" id="tableNumberId"/>
 <input type="hidden" value="${userId}" id="userId"/>
 <input type="hidden" value="${uId}" id="uId"/>
<div id="slider" class="mui-slider" >
    <div class="mui-slider-group">
        <#list userImage as userImage>
            <div class="mui-slider-item">
                <a href="#">
                    <img src="${userImage.url}" style="height: 200px;">
                </a>
            </div>
        </#list>
    </div>
</div>
<br>

 <div class="mui-content">
     <div class="mui-content-padded">
         <#list varietyClassification as varietyClassification>
             <button type="button" onclick="small('${varietyClassification.id}')" class="mui-btn mui-btn-block" style="width: 48%;height:133px;display:inline-block;background-color: ${varietyClassification.color};color: #ffffff;font-size: 30px;">${varietyClassification.varietyName}</button>
         </#list>

     </div>
 </div>


  <html>
<script src="${base}/sweep/js/mui.js?t=1"></script>
<script type="text/javascript" charset="utf-8">
    var gallery = mui('#slider');
    gallery.slider({
        interval: 1000//自动轮播周期,若为0则不自动播放,默认为0；
    });
    mui.init();
</script>
<script type="text/javascript" src="${base}/sweep/gou/js/jquery.min.js"></script>
<script type="text/javascript" src="${base}/sweep/gou/js/add.js"></script>
<script type="text/javascript" src="${base}/sweep/gou/js/vue.min.js"></script>
<script>
    function small(id) {
        window.location.href="${base}/admin/QRCode/commodity.html?attributeClassificationId="+id+"&tableNumberId="+$("#tableNumberId").val()+"&userId="+$("#userId").val()+"&uId="+$("#uId").val();
    }
</script>

</html>